<template>
  <el-dialog
    :visible.sync="dialogFormVisible"
    :before-close="handleClose"
    :show-close="true"
    :append-to-body="false"
    :class="{'mobile-el-dialog': showMobilePage}"
    title=""
    class="small-common-dialog-size"
    center
    @open="openDialog">
    <Title title="通知规则设置" />
    <div class="dialog-main">
      <selectWithoutHttp
        v-model="unpublishedNotifyId"
        :list-data="unpublishedNotifyList"
        style="width: 240px"
        multiple
        collapse-tags
        clearable
        filterable
        placeholder="请选择"
        label-name="ruleName" />
    </div>
    <div class="btn-wrap">
      <el-button :loading="loading" type="primary" size="small" @click="handleSubmit">确定</el-button>
      <el-button class="cancel-btn-style" type="info" size="small" @click="handleClose">再想想</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import { mapState } from 'vuex';
import { setNotifyRule } from '@/api/accounts';
import selectWithoutHttp from '@/components/Common/selectWithoutHttp.vue';

export default {
  components: { Title, selectWithoutHttp },
  props: {
    unpublishedNotifyList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dialogFormVisible: false,
      ids: [],
      unpublishedNotifyId: [],
      loading: false
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    openDialog(items) {
      console.log(items);
      if (!items || items.length === 0) return;
      const ids = items.map(item => item.id);
      this.ids = ids;
      this.dialogFormVisible = true;
    },
    async handleSubmit() {
      const data = {
        ids: this.ids,
        unpublishedNotifyId: this.unpublishedNotifyId
      };
      this.loading = true;
      try {
        const res = await setNotifyRule(data);
        if (res.code === 200) {
          this.handleClose();
          this.$emit('freshData');
          this.$message.success('设置成功');
        }
        this.loading = false;
      } catch (error) {
        this.loading = false;
      }
    },
    handleClose() {
      this.dialogFormVisible = false;
      this.ids = [];
      this.unpublishedNotifyId = [];
    }
  }
};
</script>
<style lang="scss" scoped>
.dialog-main {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  &::v-deep {
    .el-select {
      width: 240px;
    }
    .el-tag.el-tag--info {
      color: #406eff;
      background: #eff3fb;
      display: flex;
      align-items: center;
      .el-tag__close {
        right: 0;
        margin: 0 0 0 3px;
      }
    }
  }
}
.btn-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
}
</style>
